<!DOCTYPE html>
<html>
<head>
	<title>Header/Footer with menu/toolbar/ribbon/status</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../../codebase/dhtmlx.css"/>
	<script src="../../../../codebase/dhtmlx.js"></script>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
		}
		.my_header .text_block {
			border-bottom-width: 0px;
		}
		.my_footer .text_block {
			border-top-width: 0px;
		}
		.text_block {
			font-size: 14px;
			font-family: Roboto, Arial, Helvetica;
			color: #404040;
			padding: 5px 10px;
			height: 70px;
			border: 1px solid #dfdfdf;
			background-color: white;
		}
	</style>
	<script>
		
		var myAcc, myMenu, myToolbar, myRibbon, sbObj;
		function doOnLoad() {
			myAcc = new dhtmlXAccordion({
				parent: document.body,
				items: [
					{id: "a", text: "Cell 1-1", active: true},
					{id: "b", text: "Cell 1-2"},
					{id: "c", text: "Cell 1-3"}
				]
			});
			myAcc.cells("a").attachObject("controls");
			document.getElementById("my_logo").style.display = "none";
			document.getElementById("my_copy").style.display = "none";
			
			attachMenu();
			attachToolbar();
			attachHeader();
			attachFooter();
			
		}
		// header
		function attachHeader() {
			document.getElementById("my_logo").style.display = "";
			myAcc.attachHeader("my_logo");
		}
		function detachHeader() {
			myAcc.detachHeader();
			document.getElementById("my_logo").style.display = "none";
		}
		// footer
		function attachFooter() {
			document.getElementById("my_copy").style.display = "";
			myAcc.attachFooter("my_copy");
		}
		function detachFooter() {
			myAcc.detachFooter();
			document.getElementById("my_copy").style.display = "none";
		}
		// menu
		function attachMenu() {
			if (myMenu != null) return;
			myMenu = myAcc.attachMenu({
				icons_path: "../../../dhtmlxMenu/common/imgs/",
				xml: "../../../dhtmlxMenu/common/dhxmenu.xml"
			});
		}
		function detachMenu() {
			if (myMenu == null) return;
			myAcc.detachMenu();
			myMenu = null;
		}
		// toolbar
		function attachToolbar() {
			if (myToolbar != null) return;
			if (myRibbon != null) detachRibbon();
			myToolbar = myAcc.attachToolbar({
				icons_path: "../../../dhtmlxToolbar/common/imgs/",
				xml: "../../../dhtmlxToolbar/common/dhxtoolbar_button.xml"
			});
		}
		function detachToolbar() {
			if (myToolbar == null) return;
			myAcc.detachToolbar();
			myToolbar = null;
		}
		// ribbon
		function attachRibbon() {
			if (myRibbon != null) return;
			if (myToolbar != null) detachToolbar();
			myRibbon = myAcc.attachRibbon({
				icons_path: "../../../dhtmlxRibbon/common/",
				json: "../../../dhtmlxRibbon/common/data_attached.json"
			});
		}
		function detachRibbon() {
			if (myRibbon == null) return;
			myAcc.detachRibbon();
			myRibbon = null;
		}
		// status bar
		function attachStatusBar() {
			if (sbObj != null) return;
			sbObj = myAcc.attachStatusBar({text:"Status bar text here"});
		}
		function detachStatusBar() {
			if (sbObj == null) return;
			myAcc.detachStatusBar();
			sbObj = null;
		}
	</script>
</head>
<body onload="doOnLoad();">
	<!-- header -->
	<div id="my_logo" class="my_header">
		<div class="text_block">Attached header</div>
	</div>
	<!-- footer -->
	<div id="my_copy" class="my_footer">
		<div class="text_block">Attached footer</div>
	</div>
	<!-- buttons -->
	<div id="controls">
		<div style="margin:20px;">
			<input type="button" value="attach header" onclick="attachHeader();">
			<input type="button" value="detach header" onclick="detachHeader();">
			<br><br>
			<input type="button" value="attach footer" onclick="attachFooter();">
			<input type="button" value="detach footer" onclick="detachFooter();">
		</div>
		<div style="position: relative; margin-top: 50px;">
			<span style="margin-left: 20px;">
				<input type="button" value="attach menu" onclick="attachMenu();">
				<input type="button" value="detach menu" onclick="detachMenu();">
			</span>
			<br><br>
			<span style="margin-left: 20px;">
				<input type="button" value="attach toolbar" onclick="attachToolbar();">
				<input type="button" value="detach toolbar" onclick="detachToolbar();">
			</span>
			<br><br>
			<span style="margin-left: 20px;">
				<input type="button" value="attach ribbon" onclick="attachRibbon();">
				<input type="button" value="detach ribbon" onclick="detachRibbon();">
			</span>
			<br><br>
			<span style="margin-left: 20px;">
				<input type="button" value="attach status bar" onclick="attachStatusBar();">
				<input type="button" value="detach status bar" onclick="detachStatusBar();">
			</span>
		</div>
	</div>
</body>
</html>